
<script setup>

import * as THREE from 'three';
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
//导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
//场景
const scene = new THREE.Scene();
//相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//创建几何体
const geometry = new THREE.BufferGeometry();
console.log('几何体geometry:', geometry);

//创建顶点数据,3个点是三角形-----------------------W1
// const vertices = new Float32Array([//分正反面,点逆时针
//     -1, -1, 0,
//     1, -1, 0,
//     1, 1, 0,
//     1, 1, 0,
//     -1, 1, 0,
//     -1, -1, 0

// ]);
// //创建顶点属性
// geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
//使用索引绘制----------------W2
const vertices = new Float32Array([
    -1, -1, 0,
    1, -1, 0,
    1, 1, 0,
    -1, 1, 0
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
//创建索引
const indices = new Uint16Array([
    0, 1, 2,
    2, 3, 0
]);
//创建索引属性
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
//-------------------------------------------
//创建材质
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,//开启线框模式
    side: THREE.DoubleSide, //开启双面
});
//创建网格模型
const plane = new THREE.Mesh(geometry, material);
//将网格模型添加到场景中
scene.add(plane);
//设置相机位置
camera.position.z = 5;
camera.position.y = 2;
camera.position.x = 2
camera.lookAt(0, 0, 0)

//添加坐标辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
function animate() {
    controls.update()
    requestAnimationFrame(animate)
    renderer.render(scene, camera);
}
animate();
</script>

<template></template>
<style lang="scss" scoped></style>